<template>
<div style="margin:0 auto">
<div class="first">
     <div class="video-warp">
         <video autoplay=""  preload="preload" loop="" :src="welcome_video"  class="videoElment" muted></video>
     </div>
   </div>
    <div class="login">        
        <div class="login-context-left">      
            <p>登录后内容更精彩</p>
            <p >{{loginMthod}}</p>   
            <!--form表单-->
            <div class="login-form">
            <el-form :model="loginForm" :rules="loginFormRul" ref="loginFormRef"  >
                <el-form-item  prop="account">
                    <el-select v-model="value" placeholder="+86" style="width:80px">
                        <el-option
                        v-for="item in cities"
                        :key="item.value"
                        :label="item.value"
                        :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                    <el-input v-model="loginForm.account" placeholder="请输入手机号/用户名"  style="width:220px;"></el-input>
                </el-form-item>
                <div :class="divClass1">
                <el-form-item  prop="password">
                    <el-input  type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
              </div>
               <div  :class="divClass2">
                <el-form-item  prop="msgcode">
                    <el-input  type="text" v-model="loginForm.msgcode" placeholder="请输入验证码" style="width:170px;"></el-input>
                    <el-button type="danger"  @click="getmsg()" style="width:80px ;" v-if="show">获取验证码</el-button>
                    <span v-if="!show" style="color: #707070;">{{count}}s后重新获取</span>

                </el-form-item>
               
               </div>
                <el-form-item  prop="captcha">
                    <el-input v-model="loginForm.captcha" placeholder="请输入验证码" style="width:120px ;"/>
                    <a @click="refreshCode()" >
                            <img :src="imgcode" title="看不清点击刷新" id="captcha" class="code_img"/>
                    </a>
                </el-form-item>
                <el-checkbox v-model="loginForm.save" :border="elborder" >记住密码</el-checkbox>
               <el-checkbox v-model="checked" :border="elborder" style="color:black"><p>登录即同意<a href="#" style="text-decoration:none;">《用户协议》</a>和<a href="#" style="text-decoration:none;">《隐私政策》</a></p></el-checkbox>
              <div :class="divClass1">
               <el-button type="danger" class="login-btn" @click="login()">登录</el-button>
              </div>
              <div :class="divClass2">
               <el-button type="warning" class="login-btn" @click="loginbymsg()">登录</el-button>
              </div>
             </el-form>
            </div>
             <div class="login-bottom">
                    <ul>
                        <li><i class="iconfont icon-QQ-circle-fill"></i><span>QQ登录</span></li>
                        <li><i class="iconfont icon-wechat"></i><span>微信登录</span></li>
                        <li><i class="iconfont icon-weibo-copy"></i><span>微博登录</span></li>
                        <li  @click="msgLogin()"    :class="divClass1" ><i class="iconfont icon-shouji1"></i><span>手机号登录</span></li>
                        <li  @click="pwdLogin()"    :class="divClass2" ><i class="iconfont icon-shouji1"></i><span>密码登录</span></li>
                    </ul>
             </div>
                    
        </div>

        <div class="login-context-right">
            <div class="right_first">
                <p>扫码咨询</p>
            </div>
            <div class="second">
              <div class="second_img">
                <img src="../../assets/image/erweima.jpg" />
              </div>
              <p>App - 我的/左上角“扫一扫”</p>
            </div>
            <div class="third">
                <a @click="register()">立即注册</a>
                <a href="#" style="margin-left:50px;">登录遇到问题</a>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { ElMessage } from 'element-plus'
import CryptoJS from 'crypto-js'
import user from '@/api/user/user'
export default {
    data() {
        return {
           show:true,
      	   count:"",
      	   timer:null,
            checked:true,
             elborder:false,
            divClass1:"active",
            divClass2:"nochoose",
            loginMthod:"账号密码登录",
            passwordMthod:"账号密码登录",
            messageMthod:"短信验证登录",
             imgcode:"",
         lo_path:require("../../assets/lo.jpg"),
         welcome_video:require("../../assets/welcome-video.mp4"),
         welcome_img:require("../../assets/welcome-video-poster-v2.png"),


            loginForm:{
                account:'',
                password:'',
                captcha:'',
                save:true,
                msgcode:'',
            },
             cities: [{
                    value: '+852',
                    label: '中国香港'
                    }, {
                    value: '+853',
                    label: '中国澳门'
                    }, {
                    value: '+886',
                    label: '中国台湾'
             }],
             value: '',
            loginFormRul:{
                     account: [
                            { required: true, message: '请输入账号', trigger: 'blur' },                         
                        ],
                    password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                        ],
                        captcha: [
                            { required: true, message: '验证码不能为空', trigger: 'blur' },                        
                        ],
                    // msgcode: [
                    //         { required: true, message: '短信验证码不能为空', trigger: 'blur' },                        
                    // ]

            }
        };
    },
    mounted(){
       this.refreshCode();
       this.getCookieEn();
    },
    methods: {
      register(){
        console.log(1111);
        this.$router.push({ path:'/register'});
      },
        msgLogin(){
            this.divClass1='nochoose';
            this.divClass2='active';
            this.loginMthod = this.messageMthod;
        },
        pwdLogin(){
            this.divClass1='active';
            this.divClass2='nochoose';
            this.loginMthod = this.passwordMthod;
        },
        //请求短信验证码
        getmsg(){
          this.getPhoneCode();
          user.getMsg().then((response) => {
                    if(response.data.code===20000){                     
                        //this.setUsername();               
                         ElMessage({
                                showClose: true,
                                message: '短信发送成功',
                                type: 'success',
                            });
                    }                   
                })
        },
        //禁用获取验证码按钮
        getPhoneCode(){
              let TIME_COUNT = 10;
              if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(()=>{
                  if (this.count > 0 && this.count <= TIME_COUNT){
                    this.count--;
                  }else {
                    this.show = true;
                    clearInterval(this.timer);
                    this.timer = null;
                  }
                },1000)
              }
       },

        //验证码
        refreshCode(){
        this.imgcode = "http://localhost:10005/user/code/captcha?time=" + new Date().getTime();
      },
      //短信登录
      loginbymsg(){
            this.$refs["loginFormRef"].validate((valid) => {
              console.log("短信登录");
                //校验失败
                if (!valid) return ;
                //校验成功 发送请求 axios  get() --->method:get  put: method:put
                console.log(this.loginForm);
                user.loginbymsg(this.loginForm).then((response) => {
                    if(response.data.code===20000){                     
                        this.setUsername();               
                         ElMessage({
                                showClose: true,
                                message: '登录成功',
                                type: 'success',
                            });
                     this.$store.dispatch('saveUser', response.data.data.userInfo);
                     this.$router.push({ path:'/'});
                    //  this.$router.go(-1);
                    }else{
                         ElMessage({
                                showClose: true,
                                message: response.data.data.error,
                                type: 'error',
                            });
                            this.loginForm.password=""
                            this.loginForm.username=""
                            this.loginForm.msgcode=""

                            
                    }
                    
                })
            });           
        },
        //登录功能
        login(){
            this.$refs["loginFormRef"].validate((valid) => {  
                //校验失败
                if (!valid) return ;
                //校验成功 发送请求 axios  get() --->method:get  put: method:put
                console.log(this.loginForm);
                user.loginUser(this.loginForm).then((response) => {
                  console.log(response)
                    if(response.data.meta.status===20000){                     
                        this.setUsername();               
                         ElMessage({
                                showClose: true,
                                message: '登录成功',
                                type: 'success',
                            });
                      //token写进本地存储
                     sessionStorage.setItem("token",this.loginForm.username);
                     localStorage.setItem("userInfo",JSON.stringify(response.data.data.userInfo));
                     this.$store.dispatch('saveUser', response.data.data.userInfo);
                    //  this.$router.go(-1);
                     this.$router.push({ path:'/'});
                    }else{
                         ElMessage({
                                showClose: true,
                                message: response.data.meta.msg,
                                type: 'error',
                            });
                            this.loginForm.password=""
                            this.loginForm.username=""
                    }
                    
                })
            });           
        },
        //重置功能
        reset(){
             this.$refs.loginFormRef.resetFields();
        }, 
        //弃用方法
       //设置cookie
      setCookie: function (username, password, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info("username" + "=" + username + "; " + expires);
        document.cookie = "username" + "=" + username + "; " + expires;
        document.cookie = "password" + "=" + password + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      //查询cookie有无密码
      getUsername(){
        var username = this.getCookie("username");
        if(username!=null){
           this.loginForm.username = username;
        }
        var password = this.getCookie("password");
       if(password!=null){
        this.loginForm.password = password;
       }
        
      },
      checkCookie: function () {
        var user = this.getCookie("username");
        if (user != "") {
          alert("Welcome again " + user);
        } 
      },
       //弃用


      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);
        this.setCookie("password", "", -1);
      },
      //设置cookie密码
      setUsername(){
        if(this.loginForm.save){
                    this.setCookieEn( this.loginForm.username,this.loginForm.password ,7);                                    
                }else{
                    this.clearCookie();
                }
      },
      
      //设置cookie
    setCookieEn(portId, psw, exdays) {
      // Encrypt，加密账号密码
      var cipherPortId = CryptoJS.AES.encrypt(
        portId+'',
        "secretkey123"
      ).toString();
      var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
      console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功
 
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
      window.document.cookie = "username" + "==" + cipherPortId +";path=/;expires="+exdate.toGMTString();
      window.document.cookie = "password" + "==" + cipherPsw + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookieEn: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("=="); //根据==切割
          //判断查找相对应的值
          if (arr2[0] == "username") {
            // Decrypt，将解密后的内容赋值给账号
            var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
           
            this.loginForm.username = bytes.toString(CryptoJS.enc.Utf8)-0;
          } else if (arr2[0] == "password") {
            // Decrypt，将解密后的内容赋值给密码
            var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
            this.loginForm.password = bytes.toString(CryptoJS.enc.Utf8);
          }
        }
      }
    },

   



    },
    
}
</script>
<style lang="cscc" scoped>

</style>
<style lang="scss" scoped>
@import url('http://at.alicdn.com/t/c/font_3772258_z7osqrhf8w.css');
.first{
   position: absolute;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    margin: 0;
    padding: 0;
    font-size: 100%;
    box-sizing: border-box;
   
}
.video-warp{
    position: absolute;
    padding:0px;
    margin:0px;
    font-size: 100%;
    z-index: -1;
    
}
.videoElment{
   width:100%;
   height:100%;
   /* object-fit:fill; */
}
   .nochoose{
       display:none;
   }
    .active{
        display:"block";
    }
    .login{
        position:absolute;
        height: 100%;
        background:#fff;   
        border:2px solid red;
        width:700px;
        height: 430px;
        margin:0 auto;
        margin-top:8%;
        margin-left:28%;
        background: #fff;
        /* position:absolute; */
         display:flex;
        /* transform: translate(-50%,-50%); */
        box-shadow: 0 0 5px 5px #DDD;
        border-radius: 10px;
        overflow: hidden;
    }
    .login-context-left{
         position:relative;
        width:50%;
        height: 100%;
         padding-left:35px;
    }
  
    .login-context-left>p{
    
        font-size:20px;
        margin-top:15px;
        color:red;
        width:350px;
        // height:50px;
        
      
    }
      .login-form{
        margin-top:25px;
         width:300px;
         /* height:300px; */
         padding: 0;
      }
      
    .login-logo{
        width:150px;
        height:150px;
        position: absolute;
        top:-80px;
        left:50%;
        margin-left: -75px;
        border-radius: 50%;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 3px 2px #fff;
    }
    .login-logo  img{
         width:100%;
         height: 100%;
         border-radius: 50%;
         background-color: rgb(238,238,238);
    }
    .code_img{
        position:relative;
        width:150px;
        height:32px;
        margin-top: 8px;
        // margin-left:150px;
    }
    .login-btn{
        width:100%;
        height:40px;
        margin-top:10px;
    }
    .login-bottom{
        position:absolute;
        margin-top:10px;
        
        width:400px;
        display:flex;
        align-items: center;
    }
    .login-bottom>span{
      float:left;
      font-size:12px;
      margin-top:5px;
     /* color:red; */
    }
    .login-bottom ul{
         display:flex;
          align-items: center;
         list-style-type:none;
         padding:0;
         margin:0px;
         margin-left:-10px;
    }
    .login-bottom ul li{
       width:90px;
       height:25px;
       border-radius:50%;
        list-style-type:none;
        font-size:12px;
       
       cursor: pointer;
         color:#666;
        /* font-size:25px; */
    }
     .login-bottom ul li i{
         position:absolute;
         margin-top:0px;
         font-size:23px;
         color:#666;
        text-decoration:none;      
     }
    .login-bottom ul li  span{
    position: absolute;
    width: 60px;
    margin-top: 5px;
    margin-left:25px;
    }
    .login-bottom ul li:nth-child(1):hover .icon-QQ-circle-fill {
    /* .icon-QQ-circle-fill */
    /* border:1px solid #000000; */
    color: #11bfff;
    transition: 1s;
}
.login-bottom ul li:nth-child(2):hover .icon-wechat{
    color: #50df67;
    transition: 1s;
}
.login-bottom ul li:nth-child(3):hover .icon-weibo-copy{
   
      color: #ef2c2c;
    transition: 1s;
}
.login-bottom ul li:nth-child(4):hover .icon-shouji1{
    color: #ffe92c;
    transition: 1s;
}
/* 右边盒子 */
.login-context-right{
    position:relative;
        display:flex;
        width:50%;
        height: 100%;
         text-align:center;
         padding-top:20px;

}
.right_first{
    position:absolute;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align:center;
    color: #222;
    width:100%;
    height:40px;
}
.second{
    position:absolute;
     width:150px;
     height:200px;
     margin-left:80px;
     margin-top:80px;
}
.second_img{
  width:150px;
  height:140px;
  
}
.second_img img{
    width: 100%;
    height: 100%;
    background-size:100% 100%;
}
.second p{
    width:150px;
    height:20px;
    font-size:13px;
}
.third{
     position:absolute;
    width:100%;
    height:20px;
    margin-top:350px;
    font-size:13px;
     cursor: pointer;
}
.third a{
    text-decoration:none;
      color: rgb(9, 9, 9);
}
.third a:hover{
     color: red;
}











</style>
